<template>
    <div class="screen-content">
        <div class="screen" v-for="i in contemtlist" :key="i.id" :class="{active1:i.isShow}">
            <div class="title">
                <span>{{i.title}}</span>
            </div>
            <ul >
                <li v-for="(y,index) in i.child" :key="y.id" @click="addClassFun(index,i.id,y.select)" :class='{active:index === qwerqwre}'>{{y.name}}</li>
            </ul>
            <img src="../../assets/commodity/xiala.png" alt="" v-if="i.type===2" @click="i.isShow =!i.isShow">
        </div>
    </div>
</template>

<script>
    export default {
        name: "ScreenContent",
        props: ['contemtlist'],
        data () {
          return {
              qwerqwre:0,
              id:1
          }
        },
        methods: {
            addClassFun: function (index,id,select) {
                if(id===1){
                    this.qwerqwre = index;
                }else {
                    this.qwerqwre !== index;
                }
                if(id===2){
                    this.qwerqwre = index;
                }else {
                    this.qwerqwre !== index;
                }


                   console.log(this.qwerqwre)
                   console.log(this.id)
                   console.log(select)

            }

        }
    }
</script>

<style scoped lang="less">
    .screen-content{
        .active1{
            height: auto !important;
        }
        .screen{
            overflow: hidden;
            height: 45px;
            border-bottom: 1px solid #e0e0e0;
            >img{
                float: right;
                margin-top:14px;
                margin-right: 5px;
                cursor: pointer;
            }
            .title{
                padding-left: 15px;
                width: 85px;
                float: left;
                line-height: 45px;
            }

            ul{
                width: 88%;
                float: left;
                .active{
                    background-color:  #FE5371;
                    color: white !important;
                    .active:hover{
                        color: white !important;
                        cursor:pointer
                    }
                    span{
                        color: white !important;
                    }
                }
                li{
                    margin-top:7px;
                    float: left;
                    padding: 6px;
                    border-radius: 2px;
                    color: #666666;
                    font-size: 12px;
                    margin-right: 22px;
                    cursor: pointer;
                }
            }
        }
    }

</style>